<template>
    <div class="videoCourse">
        <div class="videoCourseUpload">
            <div class="explanation">
                <p>支持格式：mp4、flv；</p>
                <p>推荐视频分辨率：1920*1080或3840*2160</p>
                <p>注：单个文件≤10GB，时长不超过5小时</p>
            </div>
            <div class="filter">
                <span>视频类别：</span>
                <el-tree-select
                    ref="docCategoryRef"
                    node-key="value"
                    v-model="docCategory"
                    :data="docCategoryList"
                    :render-after-expand="true"
                    style="flex: 1;margin-bottom: 0px;"
                    @change="docCategoryChange"
                />
            </div>
            <div
                class="uploadBox"
                :style="{height: hHeight + 'px'}"
            >
                <el-upload
                    drag
                    action="#"
                    :http-request="(res) => { return uploadVideoCourse(res) }"
                    :on-change="handleChange"
                    :file-list="fileList"
                    v-model="uploadList"
                    accept=".mp4,.flv"
                    :disabled="!isAdmin"
                    :on-success="
                        (res) => {
                            return handleExcelImportSuccess(res);
                        }
                    "
                    style="height: 200px;"
                >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div
                        class="el-upload__text"
                        style="margin-bottom: 10px;"
                    >
                        拖拽到这里
                    </div>
                    <div class="el-upload__text">
                        或者 <em>点击这里</em> 上传
                    </div>
                    <!-- <template #tip>
                        <div
                            class="el-upload__tip"
                            style="line-height: 2"
                        >
                            文件格式：.xlsx、.xls
                        </div>
                    </template> -->
                </el-upload>
            </div>

        </div>
        <div class="videoCourseList">
            <div class="videoHeader">
                <el-tabs
                    v-model="activeName"
                    class="demo-tabs"
                    @tab-change="tabChange"
                    style="padding-bottom: 10px"
                >
                    <el-tab-pane
                        :label="item.label"
                        :name="item.value"
                        v-for="item in docCategoryFilterList"
                        :key="item.lable"
                    >
                        <el-radio-group
                            v-model="item.radioCheck"
                            size="default"
                            fill="#6cf"
                            @change="radioCheckChange"
                        >
                            <el-radio-button
                                :value="it.value"
                                v-for="it in item.children"
                                :key="it.label"
                            >{{ it.label }}</el-radio-button>
                        </el-radio-group>
                    </el-tab-pane>
                </el-tabs>
                <el-input
                    v-model="searchForm.fileName"
                    class="responsive-input"
                    placeholder="视频标题"
                    :prefix-icon="Search"
                    clearable
                    style="width: 200px"
                    @change="search"
                />
            </div>

            <el-scrollbar :height="hHeight + 'px'">

                <div
                    class="cardList"
                    v-if="tableData.length > 0"
                >
                    <el-card
                        style="width: 47%;margin: 1%;"
                        v-for="(item, index) in tableData"
                        :key="index"
                    >
                        <template #header>
                            <div class="card-header">
                                <span>{{ item.fileName }}</span>
                                <el-popover
                                    v-if="isAdmin"
                                    class="box-item"
                                    content="Bottom Center prompts info"
                                    placement="bottom"
                                    trigger="click"
                                    :width="110"
                                    style="width: 80px!important; min-width: 60px!important;"
                                >
                                    <template #reference>
                                        <el-icon>
                                            <More />
                                        </el-icon>
                                    </template>
                                    <div>
                                        <div
                                            class="moreOpration"
                                            @click="topConfirm('top', item)"
                                        >
                                            <el-icon v-if="item.topTime">
                                                <Download />
                                            </el-icon>
                                            <el-icon v-else>
                                                <Upload />
                                            </el-icon>
                                            <span>{{ item.topTime ? '取消置顶' : '置顶' }}</span>
                                        </div>
                                        <div
                                            class="moreOpration"
                                            @click="handleClick('edit', item)"
                                        >
                                            <el-icon>
                                                <Edit />
                                            </el-icon>
                                            <span>编辑</span>
                                        </div>
                                        <div
                                            class="moreOpration"
                                            @click="deleteConfirm('delete', item)"
                                        >
                                            <el-icon>
                                                <Delete />
                                            </el-icon>
                                            <span>删除</span>
                                        </div>
                                    </div>
                                </el-popover>
                            </div>
                        </template>
                        <div>
                            <vue3-video-play
                                :src="item.url"
                                :controls="true"
                                :autoplay="false"
                                :loop="false"
                                :muted="false"
                                :width="400"
                            />
                        </div>
                        <template #footer>
                            <div class="footerContent">
                                <span>{{ item.createUserName }}·{{ item.createTime }}</span>
                                <span>
                                    <img
                                        src="@/assets/images/hot.png"
                                        alt=""
                                        style=" width: 20px;height: 20px; "
                                    >
                                    {{ item.viewsCount }}
                                </span>
                            </div>
                        </template>
                    </el-card>
                </div>
                <el-empty
                    v-else
                    description="暂无数据"
                ></el-empty>
            </el-scrollbar>
            <el-pagination
                v-model:current-page="searchForm.pageNo"
                v-model:page-size="searchForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                class="paginationStyle"
            />
        </div>
    </div>
    <el-dialog
        v-model="editVisible"
        :title="'编辑'"
    >
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            label-width="120px"
            class="demo-ruleForm"
            :inline="true"
        >
            <div
                class="dialogModel"
                style="margin-top: 20px"
            >
                <el-row>
                    <el-col :span="24">
                        <el-form-item
                            label="视频类别："
                            prop="title"
                            style="width: 100%;"
                        >
                            <el-tree-select
                                ref="docCategoryRef"
                                node-key="value"
                                v-model="ruleForm.docCategory"
                                :data="docCategoryList"
                                :render-after-expand="true"
                                style="flex: 1;margin-bottom: 0px;"
                                @change="docCategoryChangeEdit"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item
                            label="视频名称："
                            prop="title"
                            style="width: 100%;"
                        >
                            <el-input
                                v-model="ruleForm.fileName"
                                style="width: 400px"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="editConfirm()"
                    v-loading="confirmLoading"
                >
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
// utils
import learningCenterHttp from "@/https/learningCenter.js";
import dataCenterHttp from "@/https/dataCenter.js";
import Storage from "@/utils/storage.js";
import moment from 'moment';
import {
    Delete,
    Edit,
    UploadFilled,
    Upload,
    Download,
    More,
    Search,
    View
} from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

let searchForm = ref({
    // depId: Storage.localGet("depId"),
    learningType: '视频课程',
    docCategory: '',
    docSubclass: '',
    orderBy: '1',
    fileName: '',
    entryDate: moment().format('YYYY-MM-DD'),
    pageNo: 1,
    pageSize: 10,
});
const localTypeUnit = ref(Storage.localGet("depId"));
const roleIds = ref(Storage.localGet("roleIds"));
const roleIdsList = ref([])
roleIdsList.value = roleIds.value.split(',')
const isAdmin = ref(false);
isAdmin.value = roleIdsList.value.includes('1');
console.log(roleIdsList.value, isAdmin.value, 'isAdmin.value')
// dict
const depIdList = ref([
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const docCategoryList = ref([
    {
        label: "操作场景",
        value: "操作场景",
        children: [
            { label: "基础操作类", value: "基础操作类" },
            { label: "设备操作类", value: "设备操作类" },
            { label: "实验流程类", value: "实验流程类" },
        ]
    },
    {
        label: "安全合规",
        value: "安全合规",
        children: [
            { label: "安全防护类", value: "安全防护类" },
            { label: "合规管理类", value: "合规管理类" },
            { label: "应急处理类", value: "应急处理类" },
        ]
    },
    {
        label: "人员能力",
        value: "人员能力",
        children: [
            { label: "新员工入职", value: "新员工入职" },
            { label: "在岗员工进阶", value: "在岗员工进阶" },
            { label: "管理人员培训", value: "管理人员培训" },
        ]
    },
    {
        label: "长效管理",
        value: "长效管理",
        children: [
            { label: "质量控制类", value: "质量控制类" },
            { label: "设备维护类", value: "设备维护类" },
        ]
    },
]);
const activeName = ref('')
const docCategoryFilterList = ref([
    {
        label: "全部",
        value: "",
        radioCheck: '1',
        children: [
            { label: "最新发布", value: "1" },
            { label: "最多播放", value: "2" },
        ]
    },
    {
        label: "操作场景",
        value: "操作场景",
        radioCheck: '',
        children: [
            { label: "全部", value: "" },
            { label: "基础操作类", value: "基础操作类" },
            { label: "设备操作类", value: "设备操作类" },
            { label: "实验流程类", value: "实验流程类" },
        ]
    },
    {
        label: "安全合规",
        value: "安全合规",
        radioCheck: '',
        children: [
            { label: "全部", value: "" },
            { label: "安全防护类", value: "安全防护类" },
            { label: "合规管理类", value: "合规管理类" },
            { label: "应急处理类", value: "应急处理类" },
        ]
    },
    {
        label: "人员能力",
        value: "人员能力",
        radioCheck: '',
        children: [
            { label: "全部", value: "" },
            { label: "新员工入职", value: "新员工入职" },
            { label: "在岗员工进阶", value: "在岗员工进阶" },
            { label: "管理人员培训", value: "管理人员培训" },
        ]
    },
    {
        label: "长效管理",
        value: "长效管理",
        radioCheck: '',
        children: [
            { label: "全部", value: "" },
            { label: "质量控制类", value: "质量控制类" },
            { label: "设备维护类", value: "设备维护类" },
        ]
    },
]);
const tabChange = (v) => {
    console.log(v)
    if (v == '') {
        searchForm.value.docCategory = v
        searchForm.value.docSubclass = ''
        searchForm.value.orderBy = '1'
    } else {
        searchForm.value.docCategory = v
        searchForm.value.docSubclass = ''
        searchForm.value.orderBy = ''
    }
    search()
}
const radioCheckChange = (v) => {
    if (activeName.value == '') {
        searchForm.value.docSubclass = ''
        searchForm.value.orderBy = v
    } else {
        console.log(v)
        searchForm.value.docSubclass = v
        searchForm.value.orderBy = ''
    }
    search()
}
const depNameTranslate = (depId) => {
    let depName = "";
    depIdList.value.forEach((item) => {
        if (item.value == depId) {
            depName = item.label;
        }
    });
    return depName;
};
let tableData = ref([]);
let total = ref(0);
const handleSizeChange = (val) => {
    searchForm.value.pageSize = val;
    search();
};
const handleCurrentChange = (val) => {
    searchForm.value.pageNo = val;
    search();
};
// 重置
const reset = async () => {
    // searchForm.value.depId = Storage.localGet("depId")
    searchForm.value.docCategory = ''
    searchForm.value.docSubclass = ''
    searchForm.value.entryDate = moment().format('YYYY-MM-DD'),
        search()
}
// 查询
const search = async () => {
    const res = await learningCenterHttp.learningCenterQueryFile(searchForm.value)
    console.log(res.data.data, 'res')
    tableData.value = res.data.data.records
    total.value = res.data.data.total
}

const docCategoryRef = ref();
const docCategory = ref('基础操作类');
const docCategoryChange = (v) => {
    console.log(v, 'v')
    docCategoryList.value.forEach(item => {
        item.children.forEach(m => {
            if (m.value == v) {
                uploadForm.value.docCategory = item.value
                uploadForm.value.docSubclass = m.value
                // docCategoryRef.value.setCheckedKeys(m.value, true)
            }
        })
    })
}
const docCategoryChangeEdit = (v) => {
    console.log(v, 'v')
    docCategoryList.value.forEach(item => {
        item.children.forEach(m => {
            if (m.value == v) {
                ruleForm.value.docCategory = item.value
                ruleForm.value.docSubclass = m.value
                // docCategoryRef.value.setCheckedKeys(m.value, true)
            }
        })
    })
}
const fileList = ref([]);
const uploadList = ref([]);
const handleChange = (file, fileList) => {
    console.log(file, fileList);
    uploadList.value = fileList;
    if (fileList.length > 1) {
        fileList.splice(0, 1);
    }
};
let uploadForm = ref({
    docCategory: '操作场景',
    docSubclass: '基础操作类',
    file: null,
    id: '',
    learningType: '视频课程',
})
const uploadVideoCourse = async (fileObj) => {
    console.log(fileObj, 'fileObj');
    uploadForm.value.file = fileObj.file
    const res = await learningCenterHttp.learningCenterUpload(uploadForm.value)
    if (res.data.code == 200) {
        ElMessage({
            message: "上传成功",
            type: "success",
        });
        search()
    } else {
        fileList.value = [];
        ElMessage({
            message: "上传失败,请重新上传",
            type: "error",
        });
    }
};
const topConfirm = async (type, row) => {
    if (row.topTime) {
        const res = await learningCenterHttp.learningCenterCancelTopFile(row)
        if (res.data.code == 200) {
            ElMessage({
                message: "取消置顶成功",
                type: "success",
            });
            search()
        } else {
            ElMessage({
                message: res.data.msg,
                type: "error",
            });
        }
    } else {
        const res = await learningCenterHttp.learningCenterTopFile(row)
        if (res.data.code == 200) {
            ElMessage({
                message: "置顶成功",
                type: "success",
            });
            search()
        } else {
            ElMessage({
                message: res.data.msg,
                type: "error",
            });
        }
    }
};
const deleteConfirm = async (type, row) => {
    ElMessageBox.confirm(
        `是否删除文档【${row.fileName}】？`,
        "删除",
        {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        }
    )
        .then(() => {
            learningCenterHttp.learningCenterDeleteFile(row).then((res) => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: "删除成功",
                        type: "success",
                    });
                    search();
                } else {
                    ElMessage({
                        message: "删除失败！",
                        type: "error",
                    });
                }
            });
        })
}
const ruleForm = ref({
    docCategory: '',
    fileName: ''
})
const editVisible = ref(false)
const handleClick = (type, row) => {
    if (type == 'edit') {
        console.log(111111)
        editVisible.value = true
        ruleForm.value = { ...row }
    }
}
const editConfirm = async () => {
    const res = await learningCenterHttp.learningCenterEditFile(ruleForm.value)
    if (res.data.code == 200) {
        ElMessage({
            message: "编辑成功",
            type: "success",
        });
        editVisible.value = false
        search()
    } else {
        fileList.value = [];
        ElMessage({
            message: res.data.msg,
            type: "error",
        });
    }
}
const handleExcelImportSuccess = () => {

}
const hHeight = ref(900)
onMounted(() => {
    hHeight.value = document.documentElement.clientHeight - 230;
    search()
})
</script>
<style lang="less" scoped>
.videoCourse {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    .videoCourseUpload {
        width: 256px !important;
        min-height: 500px;
        border-right: 1px dashed #ccc;
        margin-right: 20px;
        padding: 6px 10px;
        .explanation {
            margin-bottom: 10px;
            p {
                line-height: 1.8;
                font-size: 12px;
            }
        }
        .filter {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 10px;
            width: 100%;
            span {
                display: inline-block;
            }
        }
    }
    .videoCourseList {
        flex: 1;
    }
}
/deep/.el-upload-dragger {
    height: 300px;
    padding-top: 80px;
}
.cardList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.moreOpration {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 1.8;
    cursor: pointer;
    span {
        margin-left: 6px;
    }
}
.footerContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    span {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
.videoHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
</style>